<!-- transform 变形 是 transition 过渡 和 animation 动画 的基础   -->
<!-- transform 至少包含三部分 translate 平移 rotate 旋转 scale缩放 -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>simple</title>
    <style>
      .trans {
        width: 200px;
        height: 200px;
        background-color: blue;

        /* animation: trans 5s infinite; */
        /* animation-name: trans; */
        animation-duration: 5s;
        animation-iteration-count: infinite;
        animation-delay: 2s;

        /* transform: translate(10px); */
        /* transform: scale(1.5); */
        /* transform: rotate(45deg); */

        /* 建议复合变形时 先translate 再rotate 最后scale */
      }
      @keyframes trans {
        from {
          /* opacity: 1; */
          transform: translate(100px, 200px) scale(1);
        }
        to {
          opacity: 0.5;
          transform: translate(200px) scale(1.5);
        }
      }
    </style>
  </head>
  <body>
    <!-- translate 平移 是相对自身 以自身为左边进行平移 -->

    <div class="trans">xxxxxx</div>
    <div class="total">
      <div class="content">
        <div class="item1"></div>
        <div class="item2"></div>
        <div class="item3"></div>
      </div>
    </div>
    <div class="go">
      <div class="two"></div>
      <div class="one"></div>
    </div>
    <style>
      .one {
        width: 50px;
        height: 50px;
        background-color: chocolate;
        animation-name: frame-bug1;
        animation-duration: 5s;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
      }
      .two {
        width: 50px;
        height: 50px;
        background-color: rebeccapurple;
        animation-name: frame-bug1, op;
        animation-duration: 5s;
        animation-timing-function: ease;
        animation-fill-mode: backwards;
      }
      @keyframes frame-bug1 {
        from {
          transform: translate(0);
        }
        to {
          transform: translate(400px);
        }
      }
      @keyframes op {
        from {
          opacity: 1;
        }
        to {
          opacity: 0.1;
        }
      }
      :root {
        --my-width: 400px;
      }
      .item1 {
        width: var(--my-width);
        height: 150px;
        background-color: chocolate;
      }
      .item2 {
        width: var(--my-width);
        height: 150px;
        background-color: rebeccapurple;
      }
      .item3 {
        width: var(--my-width);
        height: 150px;
        background-color: cornflowerblue;
      }
      .content {
        width: calc(var(--my-width) * 3);
        display: flex;
        /* height: 0px; */
        /* transform: translate(-400px); */
        animation: frame-bug 5s infinite;
        /* animation-play-state: running; */
      }
      .content:hover {
        animation-play-state: paused;
      }
      /* height: 0px; */
      @keyframes frame-bug {
        0%,
        40% {
          transform: translate(0px);
        }
        50%,
        70% {
          transform: translate(-200px);
        }
        90%,
        100% {
          transform: translate(-400px);
        }
      }

      .total {
        width: var(--my-width);
        height: 150px;
        border: solid 2px red;
        overflow: hidden;
      }
    </style>
  </body>
</html>
